import React from 'react';
import {connect} from 'dva/index';
import {Button, Col, Form, Modal, Row} from 'antd';
import {importData} from '../../utils/commons';
import SingleDragger from "./SingleDragger";

const FormItem = Form.Item;
const importFile = Form.create()(class ImportFile extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            module: undefined
        }
    }

    handleOpen = (module) => {
        this.setState({ open: true, module });
    }

    handleCancel = () => {
        this.setState({ open: false });
        this.props.form.resetFields();
    }


    onImportFile = () =>{
        importData({
            modules: this.state.module,
            data: this.refs.fileUrl.getFiles(),
            onSuccess: () =>{ 
                this.setState({ open: false });
                if (this.props.refreshList) this.props.refreshList()
            },
            onFail:  () =>{ 
                this.setState({ open: false });
                if (this.props.refreshList) this.props.refreshList()
            }
        });
    }

    render() {
        let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } };
        const { getFieldDecorator } = this.props.form;
        let fileUrl = null;
        let dataSource = {};
        return (
            <Modal maskClosable={false} visible={this.state.open} width={500} title={"批量导入数据"} confirmLoading={this.props.loading} onCancel={this.handleCancel.bind(this)} footer={null}>
                <Form>
                    <Row>
                        <Col span={20}>
                            <FormItem {...formItemLayout} label={<span className="ant-form-item-required">上传导入文件</span>} hasFeedback>
                                <SingleDragger url={fileUrl} ref="fileUrl" module={this.state.module ? this.state.module : ""} disabled={false} dataSource={dataSource} isImport={true}/>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={4} style={{ marginLeft: 200, marginBottom: 10 }}>
                            <Button onClick={this.onImportFile.bind(this)}>点击导入</Button>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.declareFee, declareFee: state.declareFee, supplier: state.supplier
    };
}

export default connect(mapStateToProps)(importFile);